<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>笑脸</title>
	<style type="text/css">
		canvas{
			margin-top: 100px;
			border:1px solid red;
		}
	</style>
</head>
<body>
<canvas width="1000" height="1000" id="can">您的浏览器版本太低，不支持画布，请升级您的浏览器</canvas>
<script type="text/javascript">
	// 获取画布
	var can=document.getElementById("can");
	// 获取画笔
	var pen=can.getContext("2d");
	// 十字架
	// pen.moveTo(80,150);// 水平线
	// pen.lineTo(200,150);
	// pen.moveTo(140,90);// 垂直线
	// pen.lineTo(140,200);
	// pen.stroke();
	// 对号
	// pen.clearRect(0,0,can.width,can.height);
	// pen.moveTo(200,250);
	// pen.lineTo(250,300);
	// pen.moveTo(250,300);
	// pen.lineTo(400,200);
	// pen.stroke();

	// X号
	// pen.clearRect(0,0,can.width,can.height);
	// pen.moveTo(600,200);
	// pen.lineTo(400,300);
	// pen.moveTo(450,200);
	// pen.lineTo(550,300);
	// pen.stroke();


	// 头发
	pen.beginPath();
	pen.moveTo(200,30);
	pen.lineTo(210,70);
	pen.moveTo(220,30);
	pen.lineTo(220,70);
	pen.moveTo(240,30);
	pen.lineTo(230,80);
	pen.closePath();
	pen.stroke();


	// 圆脸
	pen.beginPath();
	pen.arc(230,150,100,Math.PI*2,false);
	pen.closePath();
	pen.stroke();
	// 左边眉毛
	pen.moveTo(150,120);
	pen.quadraticCurveTo(168,96,190,128);

	// 右边眉毛
	pen.moveTo(272,120);
	pen.quadraticCurveTo(288,96,304,128);
	pen.stroke();
	// 左边眼睛
	pen.beginPath();
	pen.arc(170,140,10,Math.PI*2,false);
	pen.fillStyle="red";
	pen.fill();
	pen.closePath();
	pen.stroke();
	//右边眼睛
	pen.beginPath();
	pen.arc(280,140,10,Math.PI*2,false);
	pen.fillStyle="blue";
	pen.fill();
	pen.closePath();
	pen.stroke();
// 嘴巴
	pen.moveTo(188,166);
	pen.quadraticCurveTo(218,223,259,171);
	pen.stroke();

// 鼻子
	pen.beginPath();
	pen.moveTo(220,134);
	pen.lineTo(203,160);
	pen.lineTo(240,160);
	pen.fillStyle="orange";
	pen.fill();
	pen.closePath();
	pen.stroke();






</script>





</body>
</html>